<template>
  <view class="flex wrap contentdatastatics">
    <view class="datastatics" :class="`datastatics_${index + 1}`" v-for="(item, index) in dataAmount" :key="item.name">
      <view class="name flex items-center">
        <span style="margin-right: 8rpx">{{ item.name }}</span>
        <ve-tooltip :placement="item.placement">
          <template #content>
            <view v-if="Array.isArray(item.tooltip)" style="width: 360rpx; white-space: pre-wrap">
              <view v-for="tip in item.tooltip" :key="tip">
                {{ tip }}
              </view>
            </view>
          </template>
          <ve-icon name="headertip" size="28" />
        </ve-tooltip>
      </view>
      <CardTotal class="mg14" :value="item.totalAmount" unit="元" thousandth color="white" />
      <template v-if="index > 0">
        <view>
          <view class="rate-view">
            <view class="mb8">
              <text>已结算：</text>
              <text>{{ formatNumber(item.totalSettlementAmount) }}</text>
              <text>元</text>
            </view>
            <view class="mb8" style="white-space: nowrap">
              <text>待结算：</text>
              <text>{{ formatNumber(item.totalWaitSettlementAmount) }}</text>
              <text>元</text>
            </view>
          </view>
        </view>
        <CardRate style="margin: 0" mode="whiteColor" :tb="item.lastYearRate" :hb="item.lastCycleRate"></CardRate>
      </template>

      <view class="car-count" v-else>
        <view class="flex"> 车辆数：{{ item.count || 0 }}辆 </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue'
  import { formatNumber } from '@/utils/index'
  import CardTotal from '../components/card/card-total.vue'
  import CardRate from '../components/card/card-rate.vue'

  const props = defineProps({
    amount: {
      type: Object,
    },
  })
  const dataAmount = ref([])
  watch(
    () => props.amount,
    (newVal) => {
      if (newVal) {
        const data = [
          {
            name: '总资产',
            tooltip: [
              '1. 总资产：车辆状态为空闲可租、租赁中、运维中、已借出车辆的购置费、购置补充费之和',
              '2. 车辆数：运营状态为空闲可租、租赁中、运维中、已借出且来源为自有、借调（借入）、挂靠/托管、融资租赁的车辆数之和',
              '3. 此处展示当前最新车辆数及资产总额，不受时间筛选影响',
            ],
            placement: 'bottom-start',
          },
          {
            name: '总收入',
            tooltip: ['1. 总收入：短租订单、违章代办费、借调（借出）、车辆处置费之和', '2. 取符合筛选条件的短租订单下包含的所有费项'],
            placement: 'bottom',
          },
          {
            name: '总支出',
            tooltip: [
              '1. 总支出：为车辆购置费、购置额外费用（购置税/过户费/运输费/保证金/手续费）、运维费用（维修/保养/年检/违章的代办真实成本）、运营成本、车辆借入之和',
              '2. 车辆购置费及购置额外费用属于公司整体支出，不属于某个门店，只有角色为管理员的用户登录时，选择全部门店时才可查看',
            ],
            placement: 'top',
          },
          {
            name: '总收益',
            tooltip: [
              '1. 总收益=总收入-总支出',
              '2. 当您角色为管理员时，选择全部门店后总收益中包含车辆购置费及购置额外费用，非管理员选择全部门店则不展示',
              '3. 筛选单个门店后，总收益中不包含车辆购置费及购置额外费用',
            ],
            placement: 'top',
          },
        ]
        dataAmount.value = data.map((item, index) => {
          if (item.name === '总资产') {
            return Object.assign(item, newVal.car)
          } else if (item.name === '总收入') {
            return Object.assign(item, newVal.totalRevenue)
          } else if (item.name === '总支出') {
            return Object.assign(item, newVal.totalExpenditure)
          } else {
            return Object.assign(item, newVal.totalProfit)
          }
        })
      }
    },
    { immediate: true },
  )
</script>

<style lang="scss">
  .flex {
    display: flex;
  }
  .items-center {
    align-items: center;
  }
  .wrap {
    flex-wrap: wrap;
  }
  .mg14 {
    margin: 14rpx 0;
  }
  .mr20 {
    margin-right: 20rpx;
  }
  .mb8 {
    margin-bottom: 8rpx;
  }
  .headertip {
    margin-top: 2rpx;
    margin-left: 8rpx;
  }
  .icon-arrow {
    display: inline-block;
    margin: 0 8rpx;
    vertical-align: 2px;
  }
  .contentdatastatics {
    width: 100%;
    justify-content: space-between;
    gap: 24rpx;
    .datastatics_1 {
      background: url('../../static/images/revenue_data1.png') no-repeat;
      background-size: 100% 100%;
    }
    .datastatics_2 {
      background: url('../../static/images/revenue_data2.png') no-repeat;
      background-size: 100% 100%;
    }
    .datastatics_3 {
      background: url('../../static/images/revenue_data4.png') no-repeat;
      background-size: 100% 100%;
    }
    .datastatics_4 {
      background: url('../../static/images/revenue_data3.png') no-repeat;
      background-size: 100% 100%;
    }
    .datastatics {
      width: 48%;
      min-height: 255rpx;
      padding: 16rpx 0 16rpx 24rpx;
      border-radius: 10rpx;
      .name {
        font-size: 24rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.8);
        line-height: 1;
      }
      .count-view {
        font-size: 24rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 28rpx;
      }
      .count {
        font-size: 40rpx;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 48rpx;
      }
      .rate-view {
        font-size: 24rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 34rpx;
      }
      .car-count {
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 34rpx;
      }
    }
  }
</style>
